<template>
  <div class="map-container">
    <div class="menu-left">
      <div class="left-head-container">
        <weather />
        <div class="equipment-box">
          <div class="content">
            <img :src="getImg('title-icon')">
            近七日服务频次趋势
          </div>
          <div ref="echart1" style="width:360px;height:150px;"></div>
        </div>
      </div>
      <div class="left-head-container" style="margin-top: 16px;">
        <div class="title-box" style="margin:8px 20px 0 20px">
          <div class="title-content">
            <div>掉线排名</div>
            <div>ASDASDASAF</div>
          </div>

          <Select class="selector">
            <Option v-for="(item, index) in selectorData" :value="item.value" :key="index">{{ item }}</Option>
          </Select>
        </div>
        <div class="bottom-chart">
          <div class="rank-box">
            <div :class="index < 3 ? 'rank' : ''" v-for="item, index in chart2Data" :key="item">
              NO.{{ index + 1 }}
            </div>
          </div>
          <div ref="echart2" class="each-chart">

          </div>
        </div>
      </div>

    </div>
    <div class="menu-right">
      <div class="right-head-container">
        <div class="title-box">
          <div class="title-content">
            <div>雪亮工程</div>
            <div>XLASDAD</div>
          </div>
        </div>
        <Carousel v-model="start" :autoplay="true" :dots="none">
          <CarouselItem class="carousel-item" v-for="(item, index) in carouselData" :key="item">
            <div>
              <img :src="item.img" class="carousel-img">
              <div class="carousel-text">{{ item.title }}</div>
            </div>
          </CarouselItem>
        </Carousel>

        <div class="content">
          <img :src="getImg('title-icon.png')">
          街道列表
        </div>
        <div class="right-head-charts">
          <Tree :data="baseData"></Tree>
        </div>
      </div>
    </div>
    <serve :menuTopData="menuTopData" :menuBottomLeftData="menuBottomLeftData" unit='处' />

    <moveBox @isClose="getStatus" v-if="showVideo" :title="curPoint.location + '监控'">
      <videoModal :video-src="curPoint.src" />
    </moveBox>
  </div>
</template>

<script setup>
import { ref, reactive, computed, getCurrentInstance, onMounted, nextTick, onUnmounted } from 'vue'
import { useData } from "@/utils/useData.js"
import videoModal from '@/components/videoModal.vue';
import moveBox from '@/components/moveBox.vue';
const { getImg, weather, echarts, serve, map, timer, pieActive, store } = useData()
const { proxy } = getCurrentInstance()
//点标记方法
const addPoint = () => {
  let content = ""
  //点坐标数组
  let maker_arr = []
  pointList.forEach(point => {
    if (point.type == 0) {
      content =
        `<div><img style="width: 42px;height: 58px" src="${getImg(icons.hdjkIcon)}"/></div>`;
    } else if (point.type == 1) {
      content =
        `<div><img style="width: 42px;height: 58px" src="${getImg(icons.fhjkIcon)}"/></div>`;
    } else {
      content =
        `<div><img style="width: 42px;height: 58px" src="${getImg(icons.zhjkIcon)}"/></div>`;
    }
    if (point.location === '龙泉驿区') {
      content =
        `<div><img src="${getImg(icons.marker)}"/></div>`;
    }
    //点坐标对象
    let marker = new AMap.Marker({
      map: map.value,
      position: point.lngLat,
      content: content,
      extData: point
    })
    //保存当前页面点坐标信息
    maker_arr.push(marker)
    //点击事件
    marker.on('click', (e) => {
      curPoint.value = e.target.getExtData()
      //展示框信息
      initInfoWindow(e.target)
    })

  })
  //保存点坐标数组
  store.commit("SETMAKER", maker_arr)

}

//轮播图变量
const start = ref(0)

const getStatus = (temp) => {
  if (!temp) {
    showVideo.value = temp
  }
}

//自定义对象
const curPoint = ref(null)

//
const showVideo = ref(false)


//信息窗口方法
const initInfoWindow = (marker) => {
  let extData = marker.getExtData()
  console.log(extData, 'eeexxx');
  let content = ` <div class="model">
                  <img class="pointLine" src="${getImg('pointLine.png')}"/>
            <div class="button" onclick="closeWindow()">
                <img src="${getImg('close-icon.png')}"/>
            </div>
            <div style="margin: 15px 10px">
                <div class="title">${extData.location}监控</div>
            </div>
            <img onclick="play()" class="image" style="cursor: pointer" src="${getImg(extData.img)}"/>
            <div class="location-text">
                <div>设备位置：<span>${extData.specificLocaltion}</span></div>
                <div>在线状态：<span>${extData.online ? '在线' : '离线'}</span></div>
            </div>
        </div>`
  let infoWindow = new AMap.InfoWindow({
    isCustom: true,
    content: content,
    //鼠标点击地图后关闭
    closeWhenClickMap: true,
    autoMove: true,
    //偏移量
    offset: new AMap.Pixel(400, -172)

  })
  //保存信息窗口
  store.commit("SETINFOWINDOW", infoWindow)
  //启动信息窗口 传入地图对象和位置
  infoWindow.open(map.value, marker.getPosition())
}

//图标方法
const initEchart1 = () => {
  let option = {
    tooltip: {
      show: true
    },
    grid: {
      top: '6%',
      left: '1%',
      right: '1%',
      bottom: '8%',
      containLabel: true,
    },
    xAxis: [{
      type: 'category',
      boundaryGap: false,
      axisLine: { //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: '#233e64'
        },
      },
      axisLabel: { //坐标轴刻度标签的相关设置
        color: '#6a9cd5',
        margin: 15,
      },
      axisTick: { show: false, },
      data: ['11', '12', '13', '14', '15', '16', '17'],
    }],
    yAxis: [{
      type: 'value',
      splitNumber: 7,
      splitLine: {
        lineStyle: {
          color: '#233e64'
        }
      },
      axisLine: { show: false, },
      axisLabel: {
        margin: 20,
        color: '#6a9cd5',
      },
      axisTick: { show: false, },
    }],
    series: [{
      name: '服务频次',
      type: 'line',
      symbolSize: 0,
      lineStyle: {
        normal: {
          color: "#3deaff"   // 线条颜色
        }
      },
      areaStyle: { //区域填充样式
        normal: {
          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(61,234,255, 0.9)' },
              { offset: 0.7, color: 'rgba(61,234,255, 0)' },
            ]
          }
        }
      },
      data: [90, 105, 84, 125, 110, 92, 98]
    }]
  };
  let chart1 = echarts.init(proxy.$refs["echart1"]);
  chart1.setOption(option);
  pieActive(chart1, option)
}

//初始化方法
const init = () => {
  addPoint()
  initEchart1()
  initEchart2()
}

//点坐标数据
const pointList = reactive([
  /*龙泉驿区政府 */
  {
    location: '龙泉驿区',
    lngLat: [104.27536, 30.556808],
    img: 'fwwd.png',
    phone: '15394612646',
    specificLocaltion: '四川省成都市龙泉驿区',
  },

  /* 龙泉街道办事处 */
  {
    location: '龙泉街道办',
    lngLat: [104.265402, 30.562251],
    type: 2,
    online: 1,
    src: 'http://159.75.169.224:7300/video.mp4',
    img: 'excel_11.png',
    phone: '15394613646',
    specificLocaltion: '四川省成都市龙泉街道办事处',
  },

  /* 洛带古镇 */
  {
    location: '洛带古镇',
    lngLat: [104.328033, 30.635452],
    type: 2,
    online: 1,
    img: 'excel_12.png',
    src: 'http://159.75.169.224:7300/video.mp4',
    phone: '15395613646',
    specificLocaltion: '洛带古镇',
  },
  /* 十陵镇 */
  {
    location: '十陵镇',
    lngLat: [104.172438, 30.645829],
    type: 1,
    online: 1,
    src: 'http://159.75.169.224:7300/video.mp4',
    img: 'excel_13.jpg',
    phone: '15294613646',
    specificLocaltion: '四川省成都市十陵镇',
  },
  /* 蒋家桥 */
  {
    location: '蒋家桥',
    lngLat: [104.290992, 30.579932],
    type: 0,
    online: 0,
    src: 'http://159.75.169.224:7300/video.mp4',
    img: 'excel_x_1.png',
    phone: '15294613646',
    specificLocaltion: '四川省成都市龙泉驿蒋家桥',
  },
  {
    location: '龙泉阳光城汽车客运站',
    lngLat: [104.307353, 30.593994],
    type: 2,
    online: 1,
    src: 'http://159.75.169.224:7300/video.mp4',
    img: 'ygcqcz.png',
    phone: '15294613646',
    specificLocaltion: '四川省成都市龙泉驿龙泉阳光城汽车客运站',
  }

])




const icons = reactive({
  marker: "five-star.png",
  hdjkIcon: "hdjk-icon.png",
  fhjkIcon: "fhjk-icon.png",
  zhjkIcon: "zhjk-icon.png",
})

//右侧轮播图数据
const carouselData = reactive([
  {
    img: getImg('mv-5.png'),
    title: '西河河道监控'
  },
  {
    img: getImg('mv-4.png'),
    title: '西河东河道监控'
  },
])

//下拉框数据
const selectorData = reactive(['全部', '当日', '近30天', '近90天', '近一年'])

//左侧数据
const chart2Data = reactive([32, 21, 12, 11, 6, 5, 4.5, 2, 2, 1])

//街道数据
const baseData = reactive([{
  expand: true,
  title: '龙泉驿区',
  children: [
    {
      title: '龙泉街道',
      expand: false,
      children: [
        {
          title: '百工堰社区',
          children: [
            {
              title: '王文'
            },
            {
              title: '林山'
            },
            {
              title: '文华'
            },

          ]
        },
        {
          title: '星光社区',
        }
      ]
    },
    {
      title: '大面街道',
      expand: false,
    },
    {
      title: '十陵街道',
      expand: false,
    },
    {
      title: '同安街道',
      expand: false,
    },
    {
      title: '洛带镇',
      expand: false,
    },
    {
      title: '洪安镇',
      expand: false,
    },
    {
      title: '山泉镇',
      expand: false,
    }
  ]
}])

//网点数据
const menuTopData = reactive([
  {
    img: getImg('sbjrs.png'),
    title: '设备接入数',
    num: 132,
  },
  {
    img: getImg('sbzxs.png'),
    title: '设备在线数',
    num: 18,
  },
  {
    img: getImg('sblis.png'),
    title: '设备离线数',
    num: 6,
  },
])

const menuBottomLeftData = reactive([
  {
    img: getImg('hdjk-icon.png'),
    title: '河道监控',
  },
  {
    img: getImg('fhjk-icon.png'),
    title: '防火监控',
  },
  {
    img: getImg('zhjk-icon.png'),
    title: '综治监控',
  },
])


//左侧图标的方法
const initEchart2 = () => {
  var option = {
    grid: {
      top: '0',
      left: '0',
      right: '4.75%',
      bottom: '0',
      containLabel: true
    },
    yAxis: [{
      type: 'category',
      data: ['龙泉街道', '大面街道', '十陵街道', '同安街道', '西河街道', '柏合街道', '东安街道', '洛带镇', '洪安镇', '山泉镇'],
      inverse: true,
      axisTick: {
        show: false
      },
      axisLabel: {
        margin: 20,
        fontSize: 18,
        color: '#fff'
      },
      axisLine: {
        show: false
      }
    }],
    xAxis: [{
      type: 'value',
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      }
    }],
    series: [{
      type: 'bar',
      barWidth: 14,
      data: chart2Data,
      label: {
        normal: {
          show: true,
          position: 'insideBottomRight',
          formatter: '{c}%',
          distance: 0,
          offset: [30, -2],
          color: '#fff',
          fontSize: 16,
          padding: [5, 15, 10, 15],
          backgroundColor: {
            image: ''
          }
        }
      },
      itemStyle: {
        color: {
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          colorStops: [{
            offset: 0,
            color: '#57eabf' // 0% 处的颜色
          }, {
            offset: 1,
            color: '#2563f9' // 100% 处的颜色
          }]
        }
      }
    },
    {
      type: "bar",
      barWidth: 14,
      barGap: "-100%",
      data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
      itemStyle: {
        color: "#444a58",
      },
      zlevel: -1
    }
    ]
  };
  let chart = proxy.$refs['echart2'];
  let myChart = echarts.init(chart);
  myChart.setOption(option);
}


//点击地图后关闭视频
const clickMethod = () => {
  showVideo.value = false
}

onMounted(() => {
  window.play = () => {
    showVideo.value = true
  }
  nextTick(() => {
    map.value.on("click", clickMethod)
    init()
    console.log(map, 'mamam');
  })
})

onUnmounted(() => {
  clearInterval(timer)
  store.dispatch('resetMap')
  map.value.off("click", clickMethod)
  showVideo.value=false
  if (window.play) {
    delete window.play
  }
})
</script>
<style lang="less" scoped>
.menu-left {
  position: absolute;
  top: 94px;
  left: 20px;
  height: 970px;
  width: 400px;
  margin-right: 16px;
  display: inline-block;

  .left-head-container {
    border-radius: 8px;
    background-color: #11387052;
    overflow: hidden;

    .equipment-box {
      margin: 0px 20px 20px 20px;

      .content {
        text-align: left;
        margin: 0px 20px 16px 20px;
        color: #B4C0CC;

        img {
          margin-right: 5px;
        }
      }
    }
  }

}

.bottom-chart {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .rank-box {
    padding: 0 5px;
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;

    .rank {
      margin-bottom: -3px;
      padding: 0px 3px;
      border: 2px solid;
      border-image-slice: 1;
      border-image-source: linear-gradient(to right, #1890FF, #1EE7E7);
    }
  }

  .each-chart {
    width: 360px;
    height: 518px;
  }

}

.menu-right {
  position: absolute;
  top: 94px;
  right: 20px;
  height: 970px;
  display: inline-block;
  width: 400px;

  .right-head-container {
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    background-color: #11387052;

    .right-head-charts {
      display: flex;
      align-items: center;

      :deep(.ivu-tree-title) {
        margin: 5px;
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 700;
        font-size: 18px;
        line-height: 20px;
        color: #ffffff;

        &:hover {
          background-color: rgba(44, 62, 80, 0.86);
        }
      }

      :deep(.ivu-tree-title-selected) {
        background-color: unset;

      }
    }

    .content {
      text-align: left;
      margin: 10px 20px 16px 20px;
      color: #B4C0CC;

      img {
        margin-right: 5px;
      }
    }
  }
}

.carousel-item {
  .carousel-img {
    display: inline-block;
    position: relative;
    border-radius: 8px;
    width: 316px;
    height: 178px;
  }

  .carousel-text {
    position: relative;
    margin: auto;
    padding-left: 12px;
    line-height: 30px;
    text-align: left;
    width: 316px;
    height: 30px;
    bottom: 34px;
    background-color: rgba(0, 0, 0, 0.56);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
}
</style>